Addon Vitest: Add status update prototype #28926

yannbf · 2024-08-20T08:36:02Z

Closes #

What I did

This brings back the implementation from #28749 regarding updating Storybook's sidebar based on test reports, this time not using JUnit but rather json reports, which include test meta (we need it to extract the storyId).
It also introduces a storybook reporter from vitest addon, so that the json file is written in the right location.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.3 MB	76.3 MB	115 B	-0.45	0%
initSize	169 MB	169 MB	-85 kB	-1.13	-0.1%
diffSize	92.8 MB	92.7 MB	-85.2 kB	-0.38	-0.1%
buildSize	7.46 MB	7.46 MB	-2.08 kB	-0.39	0%
buildSbAddonsSize	1.62 MB	1.61 MB	-1.24 kB	-0.9	-0.1%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.3 MB	0 B	0.33	0%
buildSbPreviewSize	351 kB	351 kB	-823 B	-0.78	-0.2%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.46 MB	4.46 MB	-2.06 kB	-0.82	0%
buildPreviewSize	3 MB	3 MB	-20 B	0.96	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	6.7s	16.1s	9.4s	0	58.1%
generateTime	20s	23s	3s	1.97	🔺13.1%
initTime	16.5s	19.5s	3s	1.33	🔺15.5%
buildTime	13s	14.1s	1.1s	1.18	7.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.8s	6.8s	-1s -23ms	-0.59	-14.9%
devManagerResponsive	5s	4.6s	-449ms	-0.43	-9.7%
devManagerHeaderVisible	903ms	762ms	-141ms	-0.41	-18.5%
devManagerIndexVisible	943ms	804ms	-139ms	-0.39	-17.3%
devStoryVisibleUncached	1.2s	1.4s	132ms	0.29	9.4%
devStoryVisible	940ms	803ms	-137ms	-0.41	-17.1%
devAutodocsVisible	695ms	704ms	9ms	-0.35	1.3%
devMDXVisible	697ms	669ms	-28ms	-0.42	-4.2%
buildManagerHeaderVisible	733ms	692ms	-41ms	-0.56	-5.9%
buildManagerIndexVisible	739ms	698ms	-41ms	-0.55	-5.9%
buildStoryVisible	807ms	733ms	-74ms	-0.66	-10.1%
buildAutodocsVisible	718ms	701ms	-17ms	-0.06	-2.4%
buildMDXVisible	633ms	692ms	59ms	0.47	8.5%

Greptile Summary

This PR implements a status update prototype for the Vitest addon in Storybook, enhancing test result integration.

Introduced a new StorybookReporter class in src/plugin/reporter.ts for JSON test report generation
Implemented SharedState class in src/utils/shared-state.ts for managing state across addon components
Added server-side channel in src/preset.ts for watching and processing test reports
Updated src/manager.tsx to display real-time test statuses in Storybook's sidebar
Modified vitest.config.ts to include the new Storybook reporter for Vitest

nx-cloud · 2024-08-20T08:37:46Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 34769c0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

greptile-apps

_{8 file(s) reviewed, 8 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-08-20T08:37:09Z

code/addons/vitest/src/manager.tsx

+  pending: 'pending',
+};
+
+function processTestReport(report: TestReport, onClick: any) {


style: Consider adding type annotation for onClick parameter

greptile-apps · 2024-08-20T08:37:10Z

code/addons/vitest/src/manager.tsx

+    const openInteractionsPanel = () => {
+      api.setSelectedPanel('storybook/interactions/panel');
+      api.togglePanel(true);
+    };


style: Consider extracting this function outside the change event handler for better performance

greptile-apps · 2024-08-20T08:38:13Z

code/addons/vitest/src/preset.ts

+        if(err.code === 'ENOENT') {
+          console.log('File got deleted/renamed. What should we do?');
+          return;


logic: Implement proper error handling for file deletion/renaming instead of just logging.

greptile-apps · 2024-08-20T08:38:13Z

code/addons/vitest/src/preset.ts

+  const testReportState = SharedState.subscribe<TestReport>('TEST_RESULTS', channel);
+
+  watchTestReportDirectory(reportFile, async (results) => {
+    console.log('Updating test results:', Object.keys(results.testResults).length);


style: Consider using a more descriptive logging method, such as console.debug or a custom logger.

greptile-apps · 2024-08-20T08:38:44Z

code/addons/vitest/src/types.ts

+  failure: boolean;
+  filesAdded: number;
+  filesRemoved: number;
+  filesRemovedList: any[];


style: Consider using a more specific type than any[] for filesRemovedList

greptile-apps · 2024-08-20T08:38:45Z

code/addons/vitest/src/types.ts

+  matched: number;
+  total: number;
+  unchecked: number;
+  uncheckedKeysByFile: any[];


style: Consider using a more specific type than any[] for uncheckedKeysByFile

code/addons/vitest/src/utils/shared-state.ts

ghengeveld · 2024-10-23T10:08:48Z

Closing as this has been done in another PR already.

Addon Vitest: Add status update prototype

34769c0

yannbf added feature request ci:normal addon: test labels Aug 20, 2024

greptile-apps bot reviewed Aug 20, 2024

View reviewed changes

yannbf assigned ghengeveld Aug 20, 2024

ghengeveld closed this Oct 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addon Vitest: Add status update prototype #28926

Addon Vitest: Add status update prototype #28926

yannbf commented Aug 20, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Aug 20, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Aug 20, 2024

greptile-apps bot Aug 20, 2024

greptile-apps bot Aug 20, 2024

greptile-apps bot Aug 20, 2024

greptile-apps bot Aug 20, 2024

greptile-apps bot Aug 20, 2024

ghengeveld commented Oct 23, 2024

Addon Vitest: Add status update prototype #28926

Addon Vitest: Add status update prototype #28926

Conversation

yannbf commented Aug 20, 2024 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

nx-cloud bot commented Aug 20, 2024 • edited Loading

☁️ Nx Cloud Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 20, 2024

Choose a reason for hiding this comment

ghengeveld commented Oct 23, 2024

yannbf commented Aug 20, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Aug 20, 2024 •

edited

Loading